<template>
	<view class="content">
		<view class="news">
			<!-- <view class="title">
				{{article.title}}
			</view> -->
			<view class="detail">
				<view v-html="article.content"></view>
			</view>
		</view>
		<view class="foot">
			<view class="xy"><text class="xieyi-fwxy"  @click="toAgreement(3)"> 服务协议</text> | <text class="xieyi-fwxy"  @click="toAgreement(4)"> 隐私政策</text></view>
			<view class="copyright">Copyright©2021 智汇方舟</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				article:{
					title:'',
					content: '',
				},
				type:'',
			};
		},
		async onShow() {
			
		},
		async onLoad(params) {
			if(params.type){
				this.type = params.type;
			}
			this.initPage();
		},
		methods: {
			async initPage() {
				let {data,code} = await this.$apis.aboutDetailList({
					type: 2
				});
				if (code == 200) {
					let result = data.content[0];
					let richtext = result.detail;
					richtext = richtext.replace(/<img[^>]*>/gi, function(match, capture) {
						if (match.indexOf('style') == -1) return match.replace('<img ', '<img style="max-width:80%;height:auto;"');
						return match.replace(/style\s*?=\s*?(['"])[\s\S]*?\1/gi, 'style="max-width:80%;height:auto;"'); // 替换style
					});
					
					
					const regexn = new RegExp('&amp;$nbsp;', 'gi');
					  richtext = richtext.replace(regexn, ' ');
					  richtext = richtext.replace(/\n/g,"<br/>"); 
					this.article.content = richtext;
					
					this.article.title = result.title;
				}
			},			
			toAgreement(type){
				uni.navigateTo({
					url: '/pages/login/agreement?type='+type,
				});
			}
		}
	}
</script>

<style lang="scss">
	.icon {
		&.dianzan {
			font-size: 40upx;
		}

		&.shoucang {
			font-size: 40upx;
		}

		&.zhuanfa {
			font-size: 40upx;
		}

	}

	.sf {
		width: 248upx;
		height: 182upx;
		margin: 0 auto;
	}

	.input-box {
		height: 60upx;
		background-color: #f5f5f5;
		border-radius: 30upx;
		position: relative;
		display: flex;
		align-items: center;

		.icon {
			display: flex;
			align-items: center;
			position: absolute;
			top: 0;
			right: 0;
			width: 60upx;
			height: 60upx;
			font-size: 34upx;
			color: #c0c0c0;
		}

		input {
			padding-left: 28upx;
			height: 28upx;
			font-size: 28upx;
			width: 370upx;
		}
	}

	.content {
		border-top: 1px solid #eee;
		font-family: iconfont !important;
		font-size: 28upx;
		background-color: #fff;
	}

	.news {
		background-color: #ffffff;
		padding: 31upx;

		.title {
			font-size: 32upx;
		}

		.other {
			font-size: 28upx;
			padding: 2upx 10upx;
		}

		.read {
			color: #AB61FF;
		}

		.detail {
			padding: 20upx 0upx;
			color: #666666;

		}

		.time {
			color: #666666;

		}
	}

	.other {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;
	}

	.pllist {
		margin-top: 20upx;
		margin-bottom: 90upx;
		background: #fff;

		.title {
			font-size: 32upx;
			padding: 20upx 20upx;
		}

	}

	.pl-list {
		width: 100%;
		background-color: #fff;
		/*         padding: 0 4% 3vw 4%;
     */
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding-top: 15upx;
		color: #333333;

		.product {
			border-bottom: 2upx solid #ccc;
			padding: 20upx;
			width: 100%;
			/*     border-radius: 20upx; */
			background-color: #fff;
			/*     box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1); */
			display: flex;
			flex-wrap: nowrap;
			font-size: 32upx;

			image {
				width: 115upx;
				height: 115upx;
				border-radius: 100%;
			}

			.other1 {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				width: 50%;
				margin-left: auto;
				color: #e2e2e2;
				font-size: 30upx;

				.on {
					color: #AB61FF;
				}
			}

			.name {
				/*     padding: 10upx 4%; */
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				text-align: justify;
				overflow: hidden;
				font-size: 32upx;
				line-height: 36upx;
				margin-right: 6upx;
				color: #666666;
			}

			.time {
				font-size: 28upx;
				width: 19%;
				color: #666666;
			}

			.pltext {
				color: #333333;
			}
		}
	}
	
	.foot {position:fixed;bottom:10%; width:100%; display: flex;justify-content: center; flex-flow: column; text-align: center;font-size: 20upx;}
	.foot  .xy text {font-size: 24upx;margin:0 10upx;color: #AB61FF;}
</style>
